<!DOCTYPE html>
<#assign dicSelect=JspTaglibs["http://www.casic304.cn/dicSelect"] />
<#assign secSelect=JspTaglibs["http://www.casic304.cn/secSelect"] />
<#assign fillDept=JspTaglibs["http://www.casic304.cn/fillDept"] />
<html>
<head>
    <meta charset="utf-8">
    <title>售后数据统计</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${ctx}/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="${ctx}/qbdmsStatic/iconfont/iconfont.css"/>
    <link rel="stylesheet" href="${ctx}/qbdmsStatic/style/qbdms.css">
    <script type="text/javascript">
        var __ctx = "${ctx}";
    </script>
    <style>
        .qbdms-echarsDiv{
            position: absolute;top: 90px;left: 16px;right: 16px; bottom: 12px;overflow: auto;
            padding-top: 16px;
        }
        @media screen and (min-width: 1280px){
            .chartDiv{
                width: 45%;
               display: inline-block;
            }
        }
        @media screen and (min-width: 804px) and (max-width:1280px){
            .chartDiv {
                width: 96%;
                display: inline-block;
            }
        }
        @media screen and (min-width: 704px) and (max-width:1380px){
            .chartParDiv {
                top:136px
            }
        }
        .selch .layui-icon-date {
            top: 6px !important;
        }
    </style>
</head>
<body class="listBody">
<div class="qbdms-list">
    <div class="layui-table-view-body" style="padding: 14px;height: 100%;position: relative">
        <div class="ccpui-enterSel">
            <form class="layui-form" action="" lay-filter="wQbdReportTemplateQueryForm">
                <div class="layui-form-body selch" style="margin-top: 0">
                    <div class="table-top-filter layui-row">
                        <div class="qbdms-listForm">
                            <label class="layui-form-label">统计开始年份</label>
                            <div class="layui-input-block">
                                <input type="text" class="layui-input dateTimeFiled filter-value start_time1"
                                       name="Q_beginCreateTime_DL" readonly lay-verify="required" value="${nowyear}"
                                       placeholder="请输入"/>
                            </div>
                        </div>
                        <div class="qbdms-listForm">
                            <label class="layui-form-label">统计结束年份</label>
                            <div class="layui-input-block">
                                <input type="text" class="layui-input dateTimeFiled filter-value end_time1"
                                       name="Q_endCreateTime_DG" readonly lay-verify="required" value="${nowyear}"
                                       placeholder="请输入"/>
                            </div>
                        </div>
                        <div class="qbdms-listForm">
                            <label class="layui-form-label">导出图片格式</label>
                            <div class="layui-input-block">
                                <select name="imageFormat" autocomplete="off"
                                        class="layui-input" fieldname="imageFormat"
                                        lay-filter="imageFormat" id="imageFormat" lay-verify="required">
                                    <option value="JPEG">JPEG</option>
                                    <option value="PNG">PNG</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="selchBtn">
                        <a class="layui-btn layui-btn-sm fillBtn" id="btntj" lay-submit lay-filter="tjsj" >
                            <span>统计</span>
                        </a>
                    </div>
                </div>
            </form>
        </div>
        <div class="qbdms-echarsDiv chartParDiv">
            <div id="barChart"  class="chartDiv" style="height:500px;margin-right: 24px"></div>
            <div id="pieChart" class="chartDiv" style="height:500px;"></div>
            <div style="margin: 10px;background: white" style="display: none">
                <table id="wQbdReportTemplateTable" lay-filter="wQbdReportTemplateTable"></table>
            </div>
        </div>
    </div>
</div>

<script src="${ctx}/qbdmsStatic/public/configFile.js"></script>
<script src="${ctx}/layui/layui.js"></script>
<script src="${ctx}/qbdmsStatic/public/echarts.min.js"></script>
<script>

    layui.config({
        base: serverPath.qbdmsPath + staticPath.qbdmsPath //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'common', 'laydate', 'jquery', 'publicMethods','form','table','layer','propsHandle'], function () {
        var laydate = layui.laydate;
        var $ = layui.jquery;
        var layer=layui.layer;
        var publicMethods = layui.publicMethods;
        var common = layui.common;
        var form = layui.form;
        var table = layui.table;
        var propsHandle = layui.propsHandle;
        var defProps = {
                //viewMould: 'form/formDef/view/formDesign/moulds/', // 组件模块 存放文件 *****
                viewMould: 'moulds/', // 组件模块 存放文件 *****
                selectorBtn: '.selectorBtn'
            },
            temQuery = new propsHandle();  // 实例化模板功能部分
        temQuery.initTem({
            selectorBtn: defProps.selectorBtn,
            selectorTemPath: setter.views + defProps.viewMould
        });


        dateHanlder({startName: '.start_time1', endName: '.end_time1'});
        var barChart = echarts.init(document.getElementById("barChart"));
        barChart.on('click', function (params) {
            genTable(params.seriesType,params.name)
        })
        var pieChart = echarts.init(document.getElementById("pieChart"));
        pieChart.on('click', function (params) {
            genTable(params.seriesType,params.name)
        })

        // 默认打开后显示当前年
        init();
        function init(){
            var data1 = form.val("wQbdReportTemplateQueryForm");
            getData( data1);
        }
        form.on('submit(tjsj)', function(data){
            getData( data.field);
            return false;
        })
        // 设置导出图片格式
        form.on('select(imageFormat)', function (data) {
            var imageFormat = data.value;
            barChart.setOption({
                toolbox: {
                    feature: {
                        saveAsImage: {
                            type:imageFormat
                        },
                    }
                }
            })
            pieChart.setOption({
                toolbox: {
                    feature: {
                        saveAsImage: {
                            type:imageFormat
                        },
                    }
                }
            })
        });

        /**
         * 获取统计数据
         * */
        function getData(parm){
            $.ajax({
                url: serverPath.qbdmsPath + '/qbdms/aftersalequalityproble/getData',
                data:parm ,
                type: 'get',
                dataType: 'json',
                async: false,
                success: function (res) {
                    if (res.code===0) {
                        barChartF(res.data.bardata);
                        pieChartF(res.data.piedata);
                    }else{
                        layer.alert(publicMethods.confirmStyle(res.msg),{title: false,skin: 'confirm-class'})
                    }
                }
            })
        }


        /**
         * zzy 生成柱图
         * */
        function barChartF(data){
            var barOption = {
                toolbox: {
                    feature: {
                        saveAsImage: {
                            type:"JPEG"
                        },
                    }
                },
                animation: true,
                title: {
                    text: data.title,
                    x: 'center',
                    y: 'top'
                },
                color: ['#5B8FF9'],
                xAxis: [{
                    type: 'category',
                    data: data.xtitlelist
                }],
                yAxis: [{
                    type: 'value',
                    name: '售后质量问题记录(条)',
                    nameLocation: 'middle',
                    nameTextStyle: {
                        verticalAlign: 'bottom',
                        padding: [20, 20, 30, 50]
                    },
                    axisLine: {
                        lineStyle: {
                            width: 0
                        }
                    }
                }],

                series: [{
                    name: '直接访问',
                    type: 'bar',
                    data: data.datalist,
                    barMaxWidth:40,
                    itemStyle: {
                        normal: {
                            label: {
                                show: true, //开启显示
                                textStyle: { //数值样式
                                    color: 'black',
                                    fontSize: 16
                                }
                            }
                        }
                    }
                }]
            };
            barChart.setOption(barOption);
        }
        /**
         * zzy 生成饼图
         * */
        function pieChartF(data){
            var optionPie = {
                toolbox: {
                    feature: {
                        saveAsImage: {
                            type:"JPEG"
                        }
                    }
                },
                color:['#5B8FF9','#5AD8A6','#5D7092','#F6BD16','#E86452','#6DC8EC','#945FB9','#FF9845','#1E9493','#FF99C3'],
                animation: true,
                title: {
                    text: data.title,
                    left: 'center'
                },
                legend: {
                    icon: 'circle',
                    orient: 'horizontal',
                    left: 'center',
                    bottom: '50px',
                    data: data.xtitlelist
                },
                series: [{
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    data: data.datalist,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        },
                        normal: {
                            label: {
                                show: true,
                                formatter: '{b} : {c} ({d}%)'
                            },
                            labelLine: {
                                show: true
                            }
                        }
                    }
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            pieChart.setOption(optionPie);
        }

        /**
         * zzy 点击图然后生成表格
         * @param type 哪个图触发的
         * @param parm 传入查询参数
         */
        function genTable(type,parm){
            var uurl;
            if (type === "bar") {
                uurl= serverPath.qbdmsPath + '/qbdms/aftersalequalityproble/getTableData?tdtype='+type+"&tdparm="+parm
            }
            else{
                var start=$('input[name=Q_beginCreateTime_DL]').val();
                var end=$('input[name=Q_endCreateTime_DG]').val();
                uurl= serverPath.qbdmsPath + '/qbdms/aftersalequalityproble/getTableData?tdtype='+type+"&tdprobtype="+parm+"&tdstart="+start+"&tdend="+end
            }

            table.render({
                elem: '#wQbdReportTemplateTable'
                ,url:uurl
                ,page: true //开启分页
                ,limit: 20
                // ,toolbar: '#wQbdReportTemplateHeaderToolsBar'
                ,method: 'get'
                ,autoSort: false //是否排序
                ,defaultToolbar: []
                ,cols: [[ //表头
                    // {type: 'checkbox', fixed: 'left'}
                    {field: 'sn', type: 'numbers', title: '序号', fixed: 'left'}
                    ,{field: 'filldept', title: '填写单位', sortname: 'fillman',minWidth:'110'}
                    ,{field: 'fProblemname', title: '质量问题名称', sortname: 'f_problemname',hide:false,minWidth:'130'}
                    ,{field: 'fModelsymbol', title: '型号代号', sortname: 'f_modelsymbol',hide:false,minWidth:'110'}
                    ,{field: 'fProductname', title: '故障产品名称', sortname: 'f_productname',hide:false,minWidth:'130'}
                    ,{field: 'fDetecttime', title: '问题发生时间', sortname: 'f_detecttime',hide:false,minWidth:'130',templet: function (d) {
                            return publicMethods.timeData(d.fDetecttime);
                        }}
                    ,{field: 'fModeldevelopphase', title: '型号研制阶段',minWidth:'130', sortname: 'f_modeldevelopphase',hide:false}
                    ,{field: 'fDutydept', title: '问题责任单位',minWidth:'130', sortname: 'f_dutydept',hide:false}
                    ,{field: 'fIfreset', title: '是否完成归零',minWidth:'130', sortname: 'f_ifreset',hide:false}

                ]],done:function () {
                    common.tableSelectCon('.ccpui-enterSel .layui-form input','a[lay-event=query]','.ccpui-enterSel');
                }
            });
        }

        /**
         * zzy 移植publicMethods.reflashDate的方法,修改了type为年选择器
         * @param props
         */
        function dateHanlder(props) {
            if (props.startName && props.endName) {
                var nowTime = new Date().valueOf();
                var start = laydate.render({
                    elem: props.startName,
                    trigger: 'click',
                    type: 'year',
                    max: nowTime,
                    done: function (value, date, endDate) {
                        endMax = end.config.max;
                        end.config.min = date; //最大时间为结束时间的开始值  
                        end.config.min.month = date.month - 1;
                        $(props.startName).val(value);
                    }
                });
                var end = laydate.render({
                    elem: props.endName,
                    trigger: 'click',
                    type: 'year',
                    max: 4073558400000,
                    format: 'yyyy-MM-dd',
                    done: function (value, date) {
                        if ($.trim(value) == '') {
                            var curDate = new Date();
                            date = {
                                'date': curDate.getDate(),
                                'month': curDate.getMonth() + 1,
                                'year': curDate.getFullYear()
                            };
                        }
                        start.config.max = date; //最小时间为开始时间的最大值  
                        start.config.max.month = date.month - 1;
                        $(props.endName).val(value);
                    }
                });
            }
        }

    });


</script>
</body>
</html>